<template>
  <div class="container" @click="handleGarrayClick">
    <div class="wrapper">
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) of imgs" :key="index">
          <img class="gallay-img" :src='item'>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
    name:'CommonGarray',
    props:{
      imgs:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data(){
        return{
            swiperOption:{
                pagination:'.swiper-pagination',
                paginationType : 'fraction',//分页器样式
                observer:true,//启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper
                observeParents:true,//和上面一样，不过是侦听父元素
            },
        }
    },
    methods:{//隐藏，退出garray
      handleGarrayClick(){
        this.$emit('close')
      }
    }
}
</script>

<style scoped>
.container >>> .swiper-container{
  overflow:inherit;
}
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: teal;
}
.wrapper{
  width:100%;
  height:0;
  padding-bottom: 100%;
}
.gallay-img{
  width:100%;
}
.swiper-pagination{
  color:white;
  bottom:-1rem;
}
</style>